<template>
  <div class="home">
    <parallax @onScrollChange='onScroll'
              ref="parallax">
      <template v-slot:parallax-slow>
        <nav-bar :isBack='false'
                 :navBarStyle='navBarStyle'>
          <template v-slot:nav-left>
            <img :src="navBarCurrentSlotStyle.leftIcon">
          </template>
          <template v-slot:nav-center>
            <search :searchBgColor='navBarCurrentSlotStyle.search.bgColor'
                    :icon="navBarCurrentSlotStyle.search.icon"
                    :hintColor='navBarCurrentSlotStyle.search.hintColor'></search>
          </template>
          <template v-slot:nav-right>
            <img :src="navBarCurrentSlotStyle.rightIcon">
          </template>
        </nav-bar>
        <swiper :swiperImgs='swiperImgs'
                height="200px">
        </swiper>
      </template>
      <template v-slot:parallax-content>

        <div class="home-content">

          <activity>
            <div class="activity-520">
              <img :src="item.icon"
                   v-for="(item,index) in activityData"
                   :key="index">
            </div>
          </activity>
          <mode-options @onModeOptionItemClick='onModeOptionItemClick'></mode-options>
          <seconds :dataSource='secondsData'></seconds>
          <!-- 拼购节 -->
          <activity>
            <div class="activity-pin-gou-jie">
              <img src="@img/haoHuoQiang.gif">
            </div>
          </activity>
          <goods :dataSource='goodsData'
                 v-if="goodsData.length"
                 layoutType='3'
                 @onGoodsItemClick='onGoodsItemClick'>
          </goods>
        </div>
      </template>
    </parallax>
    <cover @onClose='onClose'
           v-show="showToast"
           :zIndex="100">
      <div class="toast">
        暂无该商品
      </div>
    </cover>
  </div>
</template>
<script>
import Swiper from './currency/Swiper.vue'
import Activity from '@c/currency/Activity.vue'
import ModeOptions from '@c/currency/ModeOptions.vue'
import Seconds from '@c/seconds/Seconds.vue'
import Goods from '@c/goods/Goods.vue'
import NavBar from '@c/currency/NavigationBar.vue'
import Search from '@c/currency/Search.vue'
import Parallax from '@c/parallax/Parallax.vue'
import Cover from '@c/currency/Cover.vue'
export default {
  data () {
    return {
      swiperImgs: [],
      activityData: [],
      secondsData: [],
      goodsData: [],
      navBarSlotStyle: {
        // 默认样式
        normal: {
          leftIcon: require('@img/more-white.svg'),
          search: {
            bgColor: '#ffffff',
            hintColor: '#999999',
            icon: require('@img/search.svg')
          },
          rightIcon: require('@img/message-white.svg')
        },
        // 高亮的样式
        hintlight: {
          // 左侧插槽
          leftIcon: require('@img/more.svg'),
          // 中间插槽的样式
          search: {
            bgColor: '#d7d7d7',
            hintColor: '#ffffff',
            icon: require('@img/search-white.svg')
          },
          rightIcon: require('@img/message.svg')
        },
      },
      // 当前使用样式
      navBarCurrentSlotStyle: {

      },
      navBarStyle: {
        position: 'fixed',
        top: '0',
        backgroundColor: ''
      },
      // 记录页面滚动值
      scrollTopValue: -1,
      // 锚点值
      ANCHOR_SCROLL_TOP: 160,
      showToast: false
    }
  },
  created () {
    this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
    this.initData()
  },
  components: {
    Swiper,
    Activity,
    ModeOptions,
    Seconds,
    Activity,
    Goods,
    NavBar,
    Search,
    Parallax,
    Cover
  },
  methods: {
    initData () {
      this.$http.all([this.$http.get('/swiper'), this.$http.get('/activitys'), this.$http.get('/seconds'), this.$http.get('/goods')]).then(this.$http.spread((swiperData, activityData, secondsData, goodsData) => {
        this.swiperImgs = swiperData.data.list
        this.activityData = activityData.data.list
        this.secondsData = secondsData.data.list
        this.goodsData = goodsData.data.list
      }))
    },
    onScroll (value) {
      this.scrollTopValue = value
      let opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP
      this.navBarStyle.backgroundColor = `rgba(255, 255, 255, ${opacity})`
      if (opacity >= 1) {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.hintlight
      } else {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
      }
    },
    onModeOptionItemClick () {
      this.$router.push({
        name: 'goodsList',
        params: {
          routerType: 'push'
        }
      })
    },
    onGoodsItemClick (val) {
      if (!val.isHave) {
        this.showToast = true
        return
      }
      this.$router.push({
        name: 'goodsDetail',
        params: {
          routerType: 'push'
        },
        query: {
          goodsId: val.id,
        }
      })
    },
    onClose () {
      this.showToast = false
    }
  },
  activated () {
    this.$refs.parallax.$el.scrollTop = this.scrollTopValue
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.home {
  height: 100%;
  width: 100%;
  background-color: $bgColor;
  overflow: hidden;
  overflow-y: scroll;
  .toast {
    width: px2rem(250);
    height: px2rem(200);
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: px2rem(10);
    font-size: px2rem(30);
    text-align: center;
    line-height: px2rem(200);
    color: $MainColor;
  }
  &-content {
    height: 100%;
    .activity-520 {
      margin-top: px2rem(-4);
      border-top-left-radius: px2rem(8);
      border-top-right-radius: px2rem(8);
      img {
        width: 33.33%;
      }
    }
    .activity-pin-gou-jie {
      background-color: white;
      margin-top: px2rem($marginSize);
      img {
        width: 100%;
      }
    }
  }
}
</style>